<template>
    <div class="location">
        <div>
            <van-nav-bar title="资产地图" left-arrow @click-left="onClickLeft">
                <van-icon name="search" slot="right" @click="focusSearch" />
            </van-nav-bar>
        </div>
        <!-- <div>
            <van-search class="search-input" shape="round" v-model="searchVal" placeholder="请输入关键字" />
        </div> -->
        <div style="width: 100vw; height: 93.65vh;" class="mapbox">
            <positionMap ref="myMapRef" width="100vw" height="93.65vh" :centerObj="center" :zoomNum="zoom"
                @mapClick="mapClick" @locationSuccess="locationSuccess" @getPosition="getPositionFunc"
                :nameArr="nameArr">
            </positionMap>
        </div>
        <div class="flex_box flex_direction_column btn">
            <div class="btn-icon" @click="opendPop"><img src="../../assets/icon1.svg" alt="" sizes="" srcset=""></div>
            <!-- <div class="btn-icon"><img src="../../assets/icon2.svg" alt="" sizes="" srcset=""></div> -->
        </div>

        <van-action-sheet v-model="show" title=" " @close="closePop">
            <van-nav-bar :title="popTitle" @click-left="popLeftClick" :left-arrow=" data.parentId ? true : false" />
            <div class="flex_box flex-center padding20-v">
                <div>
                    <p>资产项目总数</p>
                    <p class="margin-top text-center">{{ data.projectCount }}</p>
                </div>
                <div class="line"></div>
                <div>
                    <p>资产总数</p>
                    <p class="margin-top text-center">{{ data.propertyCount }}</p>
                </div>
                <div class="line"></div>
                <div>
                    <p>资产总价值</p>
                    <p class="margin-top text-center">{{ data.propertyAmount }}</p>
                </div>
            </div>
            <div class="margin-bottom15" style="padding: 0 4px;">
                <template>
                    <div class="color-fff flex_box flex-center">
                        <div class="w-20 text-center table-header-p">城市</div>
                        <div class="w-20 text-center table-header-p">资产项目数</div>
                        <div class="w-20 text-center table-header-p">资产数量</div>
                        <div class="w-20 text-center table-header-p">统计数量</div>
                        <div class="w-20 text-center table-header-p">资产总价值</div>
                    </div>
                    <div style="max-height: 160px;min-height: 40px; overflow: scroll;">
                        <div class="row flex_box flex-center" v-for="(item,index) in data.projectProvinceList"
                            :key="'r' + index">
                            <div class="w-20 text-center row-p" @click="cityClick(item)">
                                <p>{{ item.cityName }}</p>
                            </div>
                            <div class="w-20 text-center row-p" @click="toZcxmFunc(item)">
                                <p>{{ item.projectNum }}</p>
                            </div>
                            <div class="w-20 text-center row-p">
                                <p>{{ item.propertyNum }}</p>
                            </div>
                            <div class="w-20 text-center row-p">
                                <p>{{ item.areaNum }}</p>
                            </div>
                            <div class="w-20 text-center row-p">
                                <p>{{ item.propertyValue }}</p>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- </van-list> -->
            </div>
        </van-action-sheet>

    </div>
</template>
<script>
    import positionMap from '@/components/positionMapAssect'
    import backMixin from '../../mixins/backMixin'
    // import positionMap from '@/components/positionMapA'
    // import positionMap from '@/components/positionMapNew'
    export default {
        mixins: [backMixin],
        components: {
            positionMap
        },
        data() {
            return {
                accessToken: '049bf45c01093ec8b69054068a67ba41',
                searchVal: '',
                show: false,
                popTitle: '全国',
                // nameArr: ['广东省', '广西', '福建省', '湖南省', '江西省'],
                // nameArr: ['广州', '东莞', '深圳', '江门', '佛山','清远'],
                // nameArr: ['天河', '番禺', '黄埔', '荔湾'],
                nameArr: [],
                zoom: 11,
                center: {},
                data: {
                    parentId: '',
                    parentName: '',
                    level: null, // 1-省 2-市 3-区 4-镇
                    projectCount: 0, //资产项目总数
                    propertyCount: 0, //资产总数
                    propertyAmount: 0, //资产总价值,
                    projectProvinceList: [
                        // {
                        //     cityName: '', // 省/市/区/街道名称
                        //     projectNum: '', // 资产项目数
                        //     propertyNum: '', // 资产数量
                        //     areaNum: '', // 统计数量
                        //     propertyValue: '', // 资产总价值
                        // }
                    ],
                }
            }
        },
        computed: {

        },
        methods: {
            // submitBtn() {
            //     this.$refs.myMapRef.getPointByAddress('佛山市')
            //     this.zoom = 8
            // },
            onClickLeft() {
                this.$router.back()
            },
            async popLeftClick(e) {
                let item = {
                    id: this.data.parentId,
                    level: this.data.level - 1
                }
                const obj = await this.getParams(item)
                this.getListFunc(obj);
                this.$refs.myMapRef.siteClick();
            },
            opendPop() {
                this.$refs.myMapRef.getPositionFunc()
            },
            async getPositionFunc(item) {
                const data = await this.getAreaId(item.city)
                const obj = await this.getParams(data)
                this.getListFunc(obj);
                this.show = true
            },
            closePop() {
                this.show = false
            },
            async mapClick(e) {
                // console.log(e, '地图点击')
                this.show = true
                this.popTitle = e.province; // district - city
                const item = await this.getAreaId(e.province)

                const obj = await this.getParams(item)
                this.getListFunc(obj);
            },
            async locationSuccess(str) {
                this.show = true
                this.popTitle = str
                this.data.level = 3
                const data = await this.getAreaId(str)
                // console.log(data, 'data - locationSuccess')
                if(!data) return
                const obj = await this.getParams(data)
                this.getListFunc(obj);
            },
            async cityClick(item) {
                // console.log(item, 'item - cityClick')
                this.popTitle = item.cityName
                // this.$refs.myMapRef.getPointByAddress(item.cityName)
                // const id = await this.getAreaId(item.cityName)

                let obj = await this.getParams(item)
                this.getListFunc(obj)
            },
            toZcxmFunc(item) {
                this.$router.push({
                    name: 'searchForAssets',
                    params: {
                        id: item.cityCode
                    }
                })
            },
            focusSearch() {
                this.$router.push({
                    path: '/searchPage'
                })
            },
            async getParams(obj) {
                let parmas = {}
                if (obj.level == 1) {
                    let provinceId = obj.cityCode || obj.id
                    if (provinceId == null || provinceId == '0') {
                        parmas.provinceId = undefined
                    } else {
                        parmas.provinceId = provinceId
                    }
                }
                if (obj.level == 2) {
                    let cityId = obj.cityCode || obj.id
                    parmas.cityId = cityId ? cityId : undefined
                }
                if (obj.level == 3) {
                    let districtId = obj.cityCode || obj.id
                    parmas.districtId = districtId ? districtId : undefined
                }
                return parmas
            },
            async init() {
                this.getConfigArea();
            },
            async getConfigArea() {
                const res = await this.$Geting(this.$api.getInitConfig)
                // console.log(res, ' 获取初始配置地图信息 - getConfigArea ')
                if (res.isSuccess) {
                    let mapName = []
                    if (res.data.level == 1) {
                        this.zoom = 5
                        mapName.push(res.data.provinceName)
                    }
                    if (res.data.level == 2) {
                        this.zoom = 8
                        mapName.push(res.data.cityName)
                    }
                    if (res.data.level == 3) {
                        this.zoom = 11
                        mapName.push(res.data.districtName)
                    }
                    this.nameArr = mapName
                    this.data.level = res.data.level
                }
            },
            async getAreaId(str) {
                const res = await this.$Posting(this.$api.searchAreaId, {
                    // 'accessToken': this.accessToken,
                    // 'orgId': 66668,
                    'areaname': str
                })
                if (res.isSuccess) {
                    return res.data
                }else{
                    return false
                }
            },
            getListFunc(parmas) {
                let obj = {
                    ...parmas,
                    // 'accessToken': this.accessToken,
                    // "tenantId": 66668,
                    // "orgIds": ["100005", "100055", "100057", "100058", "100111", "100015", "100024",
                    //     "100018",
                    //     "100006", "100007", "100008", "100025", "100027", "100029", "100036",
                    //     "100037",
                    //     "100034", "100035", "100039", "100043", "100048", "100049", "100056",
                    //     "100093",
                    //     "100095", "100096", "100098", "100099", "100100", "100101", "100102",
                    //     "100104",
                    //     "100105", "100103", "100109", "100112", "100113"
                    // ]
                }

                this.$Posting(this.$api.getH5ListRes, obj).then((res) => {
                    // console.log(res, 'res - getH5ListRes ')
                    if (res.isSuccess) {
                        this.data.projectProvinceList = []
                        res.data.projectProvinceList = res.data.projectProvinceList ? res.data
                            .projectProvinceList : [],
                            res.data.level = res.data.level ? res.data.level : 0
                        let mapName = []
                        let level = res.data.level
                        this.popTitle = res.data.parentName ? res.data.parentName : '全国'

                        if (!level) {
                            this.zoom = 5
                            // this.zoom = 8
                        }
                        if (level == 1) this.zoom = 8
                        if (level == 2) this.zoom = 10
                        if (level == 3) this.zoom = 11
                        res.data.projectProvinceList.map((item) => {
                            if (item.areaNum != null && item.areaNum != 0) {
                                item.areaNum = Number(item.areaNum).toFixed(2) + '㎡' // 统计数量
                            }
                            // let propertyValue = Number(item.propertyValue).toFixed(2)
                            // if(propertyValue == 0){ }
                            if (item.propertyValue != '0' && item.propertyValue != null) {
                                item.propertyValue = Number(item.propertyValue).toFixed(2) +
                                    '万元' // 资产总价值
                            }
                            mapName.push(item.cityName)
                        })
                        if (!res.data.propertyAmount || res.data.propertyAmount == '0') {
                            res.data.propertyAmount = 0
                        } else {
                            res.data.propertyAmount = Number(res.data.propertyAmount).toFixed(2) + '万元'
                        }
                        this.data = res.data
                        this.nameArr = mapName
                    }
                })




            },



        },
        created() {
            this.init()
        },

    }
</script>
<style lang="less" scoped>
    ::v-deep {
        .van-nav-bar__right {
            font-size: 24px;
        }
    }

    .location {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .flex-center {
        justify-content: center;
        align-items: center;
    }

    .line {
        height: 24px;
        width: 1px;
        background-color: #323232;
        margin: 0 20px;
    }

    .w-20 {
        width: 20%;
    }

    .color-fff {
        color: #fff;
    }

    .table-header-p {
        font-weight: 600;
        background-color: #2878ff;
        /* border: 1px solid #fff; */
        padding: 5px 0;
    }

    .row {
        border: 1px solid #ccc;
        border-bottom: none;
    }

    .row:last-child {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    .row-p {
        min-height: 2 8px;
        padding: 5px 0;
        border-right: 1px solid #ccc;
    }

    .row .row-p:last-child {
        border-right: none;
    }

    .btn {
        // position: absolute;
        // bottom: 65px;
        // right: 7px;
        height: 32px;
        position: absolute;
        z-index: 1200;
        text-size-adjust: none;
        inset: auto 7px 80px auto;
    }

    .btn-icon {
        margin: 0.06rem;
        padding: 0.16rem;
        background-color: #fff;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.0980392156862745);
        border-radius: 2px;
    }
</style>
